import React, { useState } from 'react';
import { useRouter } from 'next/router';
import { Button } from 'antd';
import StockChart1 from '@/components/StockChart1';
import StockChart2 from '@/components/StockChart2';
import ShowStockDetail from '@/components/ShowStockDetail';
import RealTimeChart from '@/components/RealTimeChart'; // 引入新的分时图组件

const StockDetail = () => {
    const router = useRouter();
    const { code } = router.query;
    const [frequency, setFrequency] = useState('分时'); // 默认设置为“5分”的值

    const handleBack = () => {
        router.push('/stockMarket');
    };

    if (!code) {
        return <div>Loading...</div>;
    }

    return (
        <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw', margin: 0, padding: 0, overflowX: 'hidden' }}>
            <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
                <div style={{ flexGrow: 1, backgroundColor: '#f0f2f5', padding: '20px' }}>
                    <ShowStockDetail code={code} />
                    <div style={{ display: 'flex', justifyContent: 'center', margin: '10px 0' }}>
                        <Button onClick={() => setFrequency('分时')} style={{ margin: '0 20px' }}>分时</Button>
                        <Button onClick={() => setFrequency('5')} style={{ margin: '0 20px' }}>5分</Button>
                        <Button onClick={() => setFrequency('15')} style={{ margin: '0 20px' }}>15分</Button>
                        <Button onClick={() => setFrequency('30')} style={{ margin: '0 20px' }}>30分</Button>
                        <Button onClick={() => setFrequency('60')} style={{ margin: '0 20px' }}>60分</Button>
                        <Button onClick={() => setFrequency('d')} style={{ margin: '0 20px' }}>日K</Button>
                        <Button onClick={() => setFrequency('w')} style={{ margin: '0 20px' }}>周K</Button>
                        <Button onClick={() => setFrequency('m')} style={{ margin: '0 20px' }}>月K</Button>
                    </div>
                    {frequency === '分时' ? (
                        <RealTimeChart code={code} />
                    ) : ['5', '15', '30', '60'].includes(frequency) ? (
                        <StockChart1 code={code} frequency={frequency} />
                    ) : ['d', 'w', 'm'].includes(frequency) ? (
                        <StockChart2 code={code} frequency={frequency} />
                    ) : null}
                </div>
            </div>
            <Button onClick={handleBack} style={{ alignSelf: 'center', margin: '10px' }}>返回股票市场</Button>
        </div>
    );
};

export default StockDetail;



// {frequency === '分时' ? (
//     <RealTimeChart code={code} />
// ) : (
//     <StockChart code={code} frequency={frequency} />
// )}








//分时逻辑未判断部分代码（最新）
// import React, { useState } from 'react';
// import { useRouter } from 'next/router';
// import { Button } from 'antd';
// import StockChart from '@/components/StockChart';
// import ShowStockDetail from '@/components/ShowStockDetail';

// const StockDetail = () => {
//     const router = useRouter();
//     const { code } = router.query;
//     const [frequency, setFrequency] = useState('5'); // 默认设置为“分时”的值

//     const handleBack = () => {
//         router.push('/stockMarket');
//     };

//     if (!code) {
//         return <div>Loading...</div>;
//     }

//     return (
//         <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw', margin: 0, padding: 0, overflowX: 'hidden' }}>
//             <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
//                 <div style={{ flexGrow: 1, backgroundColor: '#f0f2f5', padding: '20px' }}>
//                     <ShowStockDetail code={code} />
//                     {/* 按钮组居中显示 */}
//                     <div style={{ display: 'flex', justifyContent: 'center', margin: '10px 0' }}>
//                         <Button onClick={() => setFrequency('分时')} style={{ margin: '0 20px' }}>分时</Button>
//                         <Button onClick={() => setFrequency('5')} style={{ margin: '0 20px' }}>5分</Button>
//                         <Button onClick={() => setFrequency('15')} style={{ margin: '0 20px' }}>15分</Button>
//                         <Button onClick={() => setFrequency('30')} style={{ margin: '0 20px' }}>30分</Button>
//                         <Button onClick={() => setFrequency('60')} style={{ margin: '0 20px' }}>60分</Button>
//                         <Button onClick={() => setFrequency('d')} style={{ margin: '0 20px' }}>日K</Button>
//                         <Button onClick={() => setFrequency('w')} style={{ margin: '0 20px' }}>周K</Button>
//                         <Button onClick={() => setFrequency('m')} style={{ margin: '0 20px' }}>月K</Button>
//                     </div>
//                     <StockChart code={code} frequency={frequency} />
//                 </div>
//             </div>
//             <Button onClick={handleBack} style={{ alignSelf: 'center', margin: '10px' }}>返回股票市场</Button>
//         </div>
//     );
// };

// export default StockDetail;














// import React, { useState } from 'react';
// import { useRouter } from 'next/router';
// import StockChart from '@/components/StockChart';
// import ShowStockDetail from '@/components/ShowStockDetail';

// const StockDetail = () => {
//     const router = useRouter();
//     const { code } = router.query;
//     const [frequency, setFrequency] = useState('分时'); // 默认为分时

//     const handleBack = () => {
//         router.push('/stockMarket');
//     };

//     if (!code) {
//         return <div>Loading...</div>;
//     }

//     return (
//         <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw', margin: 0, padding: 0, overflowX: 'hidden' }}>
//             <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
//                 <div style={{ flexGrow: 1, backgroundColor: '#f0f2f5', padding: '20px' }}>
//                     <ShowStockDetail code={code} />
//                     {/* 按钮组 */}
//                     <div>
//                         <button onClick={() => setFrequency('分时')}>分时</button>
//                         <button onClick={() => setFrequency('日K')}>日K</button>
//                         <button onClick={() => setFrequency('周K')}>周K</button>
//                         <button onClick={() => setFrequency('月K')}>月K</button>
//                     </div>
//                     <StockChart code={code} frequency={frequency} />
//                 </div>
//             </div>
//             <button onClick={handleBack} style={{ margin: '10px', alignSelf: 'center' }}>返回股票市场</button>
//         </div>
//     );
// };

// export default StockDetail;








// import React from 'react';
// import { useRouter } from 'next/router';
// import StockChart from '@/components/StockChart';  // 确保路径正确
// import ShowStockDetail from '@/components/ShowStockDetail'; // 确保路径正确

// const StockDetail = () => {
//     const router = useRouter();
//     const { code } = router.query;

//     const handleBack = () => {
//         router.push('/stockMarket');
//     };

//     // 确保 code 已经从路由中获取
//     if (!code) {
//         return <div>Loading...</div>;
//     }

//     return (
//         <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw', margin: 0, padding: 0, overflowX: 'hidden' }}>
//           <div style={{ display: 'flex', flexDirection: 'row', flexGrow: 1 }}>
//             <div style={{ flexGrow: 1, backgroundColor: '#f0f2f5', padding: '20px' }}>
//               <ShowStockDetail code={code} />
//               <StockChart code={code} />
//             </div>
//           </div>
//           {/* 添加返回按钮 */}
//           <button onClick={handleBack} style={{ margin: '10px', alignSelf: 'center' }}>返回股票市场</button>
//         </div>
//     );
// };

// export default StockDetail;





// return (
//     <div>
//         <h1>股票详情: {stockData.name}</h1>
//         <p>代码: {stockData.code}</p>
//         <p>价格: {stockData.price}</p>
//         <p>涨跌幅度: {stockData.rate}</p>
//         <StockChart code={code} />  {/* 将 code 传递给 StockChart 组件 */}
//     </div>
// );